<template>
  <div class="page__report_analysis">
    <top-header
      :show-manager-loading="showManagerLoading"
      :event-list="allNodes"
      @change="getListData"
      @to-manager="toggleManager(true)"
      @channel-change="handleChannelChange"
      @version-change="handleVersionChange"/>
      <data-list
        ref="dataList"
        v-if="showData.length"
        :list="showData"
         @check="checkDetail"
         @expand="handleExpand"
         />
  </div>
</template>

<script>
import { getButtnEventListApi } from '@/api/report/button-events'
import TopHeader from './header.vue'
import DataList from './list.vue'

export default {
  name: '',
  components: {
    TopHeader,
    DataList
    // ReportManager,
    // ReportDetail
  },
  data: () => {
    return {
      showData: [],
      allNodes: [],
      listTree: [],
      showManager: false,
      showManagerLoading: false,
      searchParams: {},
      maxId: 0
    }
  },
  methods: {
    handleChannelChange (v) {
      this.searchParams.channelOpts = v
    },
    handleVersionChange (v) {
      this.searchParams.versionOpts = v
    },
    handleRefresh () {
      this.getListData({ ...this.searchParams, updateEventOptions: true })
      this.initNodesData()
    },
    async getListData (params) {
      const updateEventOptions = params.updateEventOptions
      delete params.updateEventOptions

      this.searchParams = { ...this.searchParams, ...params }
      const data = await getButtnEventListApi(params)
      const { values, allNodes } = this.formatListData(data.data || [])

      this.showData = values
      this.__allNodes = allNodes

      if (updateEventOptions) {
        this.allNodes = allNodes
      }

      // console.log(this.showData)
      // this.$refs.dataList.initGrid(values)
      // console.log(values)
    },
    formatListData (list) {
      const values = []
      const allNodes = []
      let maxId = 0
      function recursion (arr, parent_ids, layer = 0) {
        for (let i = 0; i < arr.length; i++) {
          const item = arr[i]
          const btn = {
            ...item.ButtonInfo,
            id: item.button_id,
            parent_ids,
            layer,
            hasChildren: !!item.Children?.length,
            visible: true,
            expand: true
          }
          // parent.push(btn)
          allNodes.push(btn)
          values.push(btn)
          maxId = Math.max(maxId, item.ButtonInfo.button_id)
          if (item.Children) {
            const ids = parent_ids.concat()
            ids.push(item.ButtonInfo.button_id)
            recursion(item.Children, ids, layer + 1)
          }
        }
      }
      recursion(list, [], 0)
      return { values, allNodes, maxId }
    },
    async initNodesData () {
      const params = { ...this.searchParams, mode: 1, button_id: '' }
      const data = await getButtnEventListApi(params)
      const { allNodes, values, maxId } = this.formatListData(data.data || [])
      this.allNodes = allNodes
      this.maxId = maxId
      this.listTree = values
    },
    async toggleManager (v) {
      // this.showManager = v === void 0 ? !this.showManager : v
      const show = v === void 0 ? !this.showManager : v
      if (show === false) {
        this.showManager = false
        return
      }
      this.showManagerLoading = true
      await this.initNodesData()
      this.showManagerLoading = false
      this.showManager = true
    },
    checkDetail (item) {
      const { appid, unionid, version, date } = this.searchParams
      const query = { appid, unionid, version, date, button_id: item.button_id, button_name: item.button_name }
      this.$router.push({
        path: '/feature/report-detail',
        query
      })
    },
    getChildrenIndex (item) {
      const id = item.button_id
      const indexs = []
      this.allNodes.forEach((i, index) => {
        if (i.parent_ids.includes(id)) {
          indexs.push(index)
        }
      })
      return indexs
    },
    getChildrenList (item) {
      const id = item.button_id
      const list = this.__allNodes.filter(i => i.parent_ids.includes(id))
      return list.concat()
    },
    handleExpand (item) {
      const id = item.button_id
      const expand = item.expand
      if (expand) { // 收缩
        const list = this.showData.filter(i => !i.parent_ids.includes(id))
        this.showData = list
        item.expand = false
        return
      }
      const list = this.getChildrenList(item)
      const index = this.showData.findIndex(i => i.button_id === id)
      this.showData.splice(index + 1, 0, ...list)
      item.expand = true
    }
  },
  mounted () {
    this.initNodesData()
  }
}
</script>

<style lang="scss" scoped>
.page__report_analysis {
  display: flex;
  flex-direction: column;
}
</style>
